<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题" prop="keyword">
        <el-input
          v-model="queryParams.keyword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<div>
  <div>搜索</div>
  <span>
          <el-button v-if="keyword != ''">{{keyword}}</el-button>
  </span>
</div>
    <div>
      <div>
        <div>
          <ul>
            <li v-for="(attr, index) in attributes" :key="index">
              <strong>{{ attr.attrName }}:</strong>
              <span v-if="attr.valueSelect.length > 0" >
                  <el-button  v-for="attrValue in attr.valueSelect.split(',')" >{{attrValue}}</el-button>
                </span>
              <span v-else>
                  无值
                </span>
            </li>
          </ul>
        </div>
        <div>
          <span>品牌: </span>
          <template>
            <div class="image-list-container">
              <div
                v-for="(image, index) in images"
                :key="image.brandId"
                class="image-item"
                @click="handleImageClick(image.brandId)"
              >
                <img :src="image.logo" :alt="image.name" />
              </div>
            </div>
          </template>
        </div>
        <span>
          <el-button type="primary">小米</el-button> <el-button type="primary">华为</el-button>
        </span>

      </div>
    </div>


      <template>
        <div class="card-container">
          <el-row :gutter="20">
            <el-col :span="4" v-for="(item, index) in infoList" :key="item.skuId">
              <el-card class="custom-card">
                <img :src="item.skuImg" class="card-image">
                <div class="card-content">
                  <span class="card-title" >{{ item.skuTitle.slice(0, 20) + (item.skuTitle.length > 20 ? '...' : '') }}</span>
                  <p class="card-subtitle">{{ item.skuSubtitle.slice(0, 15) + (item.skuSubtitle.length > 15 ? '...' : '') }}</p>
                  <div class="card-price">￥{{ item.skuPrice }}</div>
                  <el-button type="text" class="card-button" @click="button(item.skuId)">操作按钮</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>
<style scoped>
.image-item img {
  width: 100px; /* 设置您希望的宽度 */
  height: 100px; /* 设置您希望的高度 */
  object-fit: cover; /* 保持图片比例裁剪 */
}
.image-list-container {
  display: flex; /* 使用flex布局 */
  flex-wrap: wrap; /* 如果容器宽度不够，允许子元素换行 */
}

.image-item {
  margin-right: 10px; /* 右侧间距 */
  margin-bottom: 10px; /* 底部间距，用于换行后的图片 */
}

.image-list-container .image-item:not(:nth-child(5n)) {
}

@media (max-width: 600px) {
  .image-item {
    width: calc(50% - 20px); /* 假设每行2张图片，并考虑间距 */
  }
}
.image-list-container {
  padding: 10px; /* 容器内边距，用于控制图片与容器边缘的间距 */
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  margin: 0 10px 10px 0; /* 上0，右10px，下10px，左0 */
}
.custom-card {
  /* 自定义卡片样式 */
  height: 200px; /* 固定高度 */
  overflow: auto; /* 当内容超出容器时，启用滚动条 */
  margin-bottom: 20px; /* 设置卡片之间的垂直间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.card-image {
  width: 100%; /* 图片宽度自适应卡片宽度 */
  height: auto; /* 图片高度自适应以保持宽高比 */
}

.card-content {
  padding: 10px; /* 内容区域的填充 */
}

.card-title {
  font-size: 16px; /* 标题字体大小 */
  font-weight: bold; /* 标题字体加粗 */
}

.card-subtitle {
  font-size: 14px; /* 副标题字体大小 */
  color: #666; /* 副标题颜色 */
}

.card-price {
  font-size: 16px; /* 价格字体大小 */
  color: #f56c6c; /* 价格颜色 */
  margin-top: 10px; /* 价格与副标题之间的间距 */
}

.card-button {
  margin-top: 10px; /* 按钮与价格之间的间距 */
}
</style>
<script>
import {listInfo, getInfo, delInfo, addInfo, updateInfo, logo, pmsAttr} from "@/api/goods/info";
import router from "@/router/index.js";

export default {
  name: "Info",
  data() {
    return {
      attributes: [],
      attrValues:[],
      // 图片logo
      images: [],
      keyword: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // sku信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        // keyword:'华为手机',
        keyword:'',
        // brandId:[1,2],
        // catalog3Id:255,
        // sort:'skuPrice_desc',
        // hasStock:true,
        // skuPrice:'10_20000',
        // attrs:'1_5G:6G&3_流光幻境:skyblue',
        pageNum:1
      },
      condion:{
        keyword:'华为手机',
        brandId:[1,2],
        catalog3Id:255,
        sort:'skuPrice_desc',
        hasStock:true,
        skuPrice:'10_20000',
        attrs:[
          {
            attrId:1,
            attrValues:[]
          }
        ],
        pageNum:1
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 图片点击 **/
    handleImageClick(imageId) {
      console.log('图片 ID:', imageId);
      // 在这里处理点击事件，例如导航到另一个页面或显示更多信息
      // 您可以使用imageId来从服务器获取更多关于该图片的信息
    },
    /** 查询sku信息列表 */
    getList() {
      this.loading = true;
      // this.queryParams
      var form = {}
      listInfo(this.queryParams).then(response => {
        console.log("列表")
        console.log(response)
        this.infoList = response.data.products;
        // this.total = response.total;

        this.loading = false;
      });
      logo().then(res => {
        this.images =res.rows;
      })
      pmsAttr().then(response =>{
        console.log("属性", response)
        this.attributes = response.rows;
        // console.log()
        // this.attributes.valueSelect.forEach((attrs)=>{
        //   console.log(attrs)
        //   this.attrValues.push(attrs.split(','))
        //   console.log(this.attrValues)
        // })
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        skuId: null,
        spuId: null,
        skuName: null,
        skuDesc: null,
        catalogId: null,
        brandId: null,
        skuDefaultImg: null,
        skuTitle: null,
        skuSubtitle: null,
        price: null,
        saleCount: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.keyword = this.queryParams.keyword
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 多选框选中数据 **/
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.skuId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加sku信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const skuId = row.skuId || this.ids
      getInfo(skuId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改sku信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.skuId != null) {
            updateInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const skuIds = row.skuId || this.ids;
      this.$modal.confirm('是否确认删除sku信息编号为"' + skuIds + '"的数据项？').then(function() {
        return delInfo(skuIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/info/export', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xlsx`)
    },
    /** 按钮 */
    button(skuId) {
      // router.push("/detailsInformation/selectSkuItemInfoBySkuId/1");
      this.$router.push({
        path:'/detailsInformation/selectSkuItemInfoBySkuId',
        query:{
          skuId:skuId
        }
      })

      alert(skuId)
    }
  }
};
</script>
